<!--  -->
<template>
  <div class='videoIpload'>
    <el-upload drag action :auto-upload="false" :on-change="videoSaveToUrl" :show-file-list="false" accept=".mp4">
      <div class="el-upload__tip">视频文件仅支持mp4,大小500MB以内</div>
      <i class="el-icon-upload"></i>
      <div class="el-upload__text"><em>点击上传</em></div>
    </el-upload>
    <transition name="el-fade-in-linear">
      <el-progress v-if="progress" :percentage="percentage" :stroke-width="20" :color="customColor" />
    </transition>
    <!-- 视频播放器 -->
    <video-player v-if="videoPlayer" class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true"
      :options="playerOptions">
    </video-player>
    <div class="del-Status">
      <el-button type="danger" v-if="videoPlayer" @click="delVideo">删除</el-button>
      <span v-if="videoData && videoData['companyFileOutVo']"
        :class="imgStatus[videoData['companyFileOutVo'].auditStatus][0]">{{imgStatus[videoData['companyFileOutVo'].auditStatus][1]}}
      </span>
    </div>
  </div>
</template>

<script>
import { uploadByPieces } from "./js/utils";
import { deletebyid } from '../../../../api/index';
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
export default {
  name: 'videoIpload',
  components: {
    videoPlayer
  },
  data () {
    return {
      // 视频审核状态
      imgStatus: {
        1: ['reviewed', '待审核'],
        2: ['Approved', '审核通过'],
        3: ['AuditFailed', '审核未通过']
      },
      percentage: 0,
      customColor: [
        { color: '#f56c6c', percentage: 20 },
        { color: '#1989fa', percentage: 30 },
        { color: '#6f7ad3', percentage: 40 },
        { color: '#6B8E1F', percentage: 50 },
        { color: '#5A26C9', percentage: 60 },
        { color: '#DB1B81', percentage: 65 },
        { color: '#957E1E', percentage: 70 },
        { color: '#354E9E', percentage: 75 },
        { color: '#4AA5A6', percentage: 80 },
        { color: '#4A973E', percentage: 85 },
        { color: '#45BF32', percentage: 90 },
        { color: '#35D51C', percentage: 95 },
        { color: '#24FA03', percentage: 100 }
      ],
      flag: false,
      // 是否显示金进度条
      progress: false,
      // 是否显示视频控件
      videoPlayer: false,
      // 视频播放配置
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0, 3.0, 5.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        // 这里可以增加视频类型 例如：MP4,wmv,qlv等等 
        sources: [
          {
            // src: "//path/to/video.mp4", // 路径
            src: "", // 路径
            type: "" // 类型
          },
          {
            src: "",
            type: "video/mov"
          },
          {
            src: "",
            type: "video/avi"
          }
        ],
        poster: "", // 如果有 封面地址 那就把封面图片架构来 后期产品新增功能或者优化 可能会有，我先把功能加进来
        notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,// 当前时间和持续时间的分隔符
          durationDisplay: true,// 显示持续时间
          remainingTimeDisplay: false,// 是否显示剩余时间功能
          fullscreenToggle: true  // 全屏按钮
        }
      },
      videoData: {}
    };
  },
  computed: {},
  props: ['companyFileOutVo'],
  watch: {
    companyFileOutVo: {
      handler (newVal, oldVal) {
        if (newVal['companyFileOutVo'] && newVal['companyFileOutVo'].filePath) {
          this.$set(this.playerOptions.sources, 0, {
            type: "",
            src: newVal['companyFileOutVo'].filePath || ''
          })
          this.videoPlayer = true
          this.videoData = newVal
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    // 触发上传文件
    videoSaveToUrl (event) {
      this.video = event.raw;
      // avi,mp4,mov
      if (!/(.*)\.(mp4|MP4)$/.test(event.raw.name)) { //根据后缀，判断是否符合视频格式
        this.$message.error('视频必须是mp4格式，上传失败！')
        return false;
      }
      if (event.raw.size > 524288000) {
        this.$message.error('最大上传视频不能大于500M，上传失败！')
        return false
      }
      this.percentage = 0
      this.flag = false
      this.progress = true
      this.videoPlayer = false
      this.videoData = ''
      this.$set(this.playerOptions.sources, 0, {
        type: "",
        src: ''
      })
      this.processButtonClick()
    },
    // 调用上传的方法
    processButtonClick () {
      uploadByPieces({
        file: this.video,//视频实体
        pieceSize: 0.5, //分片大小
        success: data => {
          if (data.success) {
            if (!this.flag) {
              this.$message.success('上传视频成功')
              this.$set(this.playerOptions.sources, 0, {
                type: "",
                src: data.data
              })
              this.videoData = data.data
              // 节流阀
              this.flag = true
              // 隐藏进度条
              this.progress = false
              // 显示视频控件
              this.videoPlayer = true

              this.$emit('videoChange', data.data)
            }
          }
        },
        error: e => {
          this.$message.error(e.msg)
          // 隐藏进度条
          this.progress = false
        },
        // 进度条
        progress: e => {
          this.percentage = e
        }
      });
    },
    // 删除视频
    delVideo () {
      if (this.videoData['companyFileOutVo'] && this.videoData['companyFileOutVo'].id) {
        let objForm = new FormData()
        objForm.append('id', this.videoData['companyFileOutVo'].id)
        deletebyid(objForm).then((res) => {
          if (res.success) {
            // 删除
            this.videoData = ''
            // 显示视频控件
            this.videoPlayer = false
            this.$message.success('删除成功')
          }
        })
      } else {
        this.videoPlayer = false
        this.$set(this.playerOptions.sources, 0, {
          type: "",
          src: ''
        })
        this.videoData = ''
        this.$message.success('删除成功')
      }
    }
  },
  created () {

  },
  mounted () {

  },
  beforeCreate () { },
  beforeMount () { },
  beforeUpdate () { },
  updated () { },
  beforeDestroy () { },
  destroyed () { },
  activated () { },
}
</script>
<style scoped>
.videoIpload /deep/ .el-progress {
    width: 60%;
}
.video-player {
    margin-top: 20px;
    object-fit: fill;
}

/* feat：样式表，设置播放按钮的形状与位置： */
.video-player /deep/ .video-js .vjs-big-play-button {
    top: 50% !important;
    left: 50% !important;
    margin-left: -45px !important;
    margin-top: -24px !important;
    border: 0 solid rgba(43, 51, 63, 0.7);
    /* background-color: none; */
    background-color: rgba(43, 51, 63, 0);
}

.AuditFailed {
    color: red;
    display: inline-block;
    text-align: center;
    margin-left: 30px;
}
.Approved {
    color: #76c941;
    display: inline-block;
    text-align: center;
    margin-left: 30px;
}
.reviewed {
    display: inline-block;
    text-align: center;
    margin-left: 30px;
}
.del-Status {
    margin-top: 20px;
}
</style>